<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源关系智能问答系统</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link href="/static/styles.css" rel="stylesheet">
    <!-- 配置Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#6366F1',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F1F5F9'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #4F46E5 0%, #6366F1 50%, #8B5CF6 100%);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .transition-all-500 {
                transition: all 500ms ease-in-out;
            }
            .transform-style-3d {
                transform-style: preserve-3d;
            }
            .perspective-1000 {
                perspective: 1000px;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="bg-light text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="navbar sticky top-0 z-10 backdrop-blur-md bg-white/80 dark:bg-slate-900/80 transition-all duration-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <h1 class="text-3xl font-extrabold bg-gradient-to-r from-blue-600 to-indigo-700 bg-clip-text text-transparent">
                        资源关系智能问答系统
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="toggleTheme" class="p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 shadow-sm">
                        <i class="fa fa-moon-o text-gray-700 dark:text-gray-300"></i>
                    </button>
                    <button id="showHelp" class="p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-300 shadow-sm">
                        <i class="fa fa-question-circle text-gray-700 dark:text-gray-300"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 问答区域 -->
        <section class="mb-8 bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="p-6">
                <h2 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-robot text-primary mr-2"></i>
                    智能问答
                </h2>
                
                <!-- 查询输入区域 -->
                <div class="mb-4">
                    <form id="queryForm" class="mb-8 perspective-1000">
                <div class="flex gap-4 transform-style-3d transition-all-500">
                    <input type="text" id="queryInput" placeholder="请输入您的问题..." class="flex-1 p-5 border-2 border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm transition-all duration-300 bg-white" required>
                    <button type="submit" id="queryBtn" class="px-8 py-5 bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-xl hover:from-blue-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">查询</button>
                </div>
            </form>
                </div>
                
                <!-- 加载状态 -->
                <div id="loadingIndicator" class="loading hidden">
                    <div class="spinner"></div>
                    <p>正在处理您的查询...</p>
                </div>
                
                <!-- 回答内容 -->
                <div id="answerContent" class="mb-6 p-6 bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-sm border border-gray-100 min-h-[150px] transition-all duration-300"></div>
                
                <!-- 上下文信息折叠面板 -->
                <div id="contextContainer" class="mb-6 transition-all-300">
                    <div id="contextHeader" class="collapse-header flex justify-between items-center p-4 bg-gray-50 rounded-t-lg cursor-pointer hover:bg-gray-200 transition-colors">
                        <h3 class="font-semibold text-lg flex items-center">
                            <i class="fa fa-book text-secondary mr-2"></i>
                            相关知识
                        </h3>
                        <svg id="contextChevron" class="collapse-icon w-5 h-5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                    <div id="contextList" class="collapse-content mt-2 space-y-2 p-4 bg-white rounded-b-lg border border-gray-200 hidden">
                        <!-- 上下文内容将在这里动态插入 -->
                    </div>
                </div>
                
                <!-- 查询分析结果 -->
                <div id="analysisResult" class="mb-6 p-4 bg-blue-50 rounded-lg"></div>
                
                <!-- 加载状态 -->
                <div id="thinkingIndicator" class="hidden flex justify-center items-center p-8">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
                    <span class="ml-3 text-gray-600">正在思考，请稍候...</span>
                </div>
                
                <!-- 历史记录 -->
                <div class="mt-6">
                    <h3 class="text-lg font-semibold mb-3 flex items-center">
                        <i class="fa fa-history text-gray-600 mr-2"></i>
                        历史记录
                    </h3>
                    <div id="historyList" class="space-y-2 max-h-40 overflow-y-auto">
                        <p class="text-gray-500 italic text-center">暂无查询历史</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 可视化和搜索区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 知识图谱可视化 -->
            <section class="lg:col-span-2 bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-sitemap text-accent mr-2"></i>
                        知识图谱
                    </h2>
                    <div id="graphContainer" class="w-full h-[400px] border border-gray-200 rounded-lg overflow-hidden bg-gray-50">
                        <div class="flex items-center justify-center h-full">
                            <p class="text-gray-500 italic">正在加载知识图谱...</p>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <div class="flex space-x-2">
                            <button id="zoomIn" class="p-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition-all-300">
                                <i class="fa fa-search-plus text-gray-600"></i>
                            </button>
                            <button id="zoomOut" class="p-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition-all-300">
                                <i class="fa fa-search-minus text-gray-600"></i>
                            </button>
                            <button id="resetGraph" class="p-2 rounded-lg border border-gray-300 hover:bg-gray-100 transition-all-300">
                                <i class="fa fa-refresh text-gray-600"></i>
                            </button>
                        </div>
                        <div class="text-sm text-gray-500">
                            <span id="nodeCount">节点: 0</span> | 
                            <span id="edgeCount">关系: 0</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 搜索和统计区域 -->
            <section class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-search text-primary mr-2"></i>
                        资源搜索
                    </h2>
                    
                    <!-- 搜索框 -->
                    <div class="mb-4">
                        <div class="flex space-x-2">
                            <input
                                type="text"
                                id="resourceSearchInput"
                                placeholder="搜索资源名称或描述..."
                                class="flex-grow px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                            >
                            <button
                                id="resourceSearchBtn"
                                class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg font-medium transition-all-300"
                            >
                                <i class="fa fa-search"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 搜索结果 -->
                    <div id="searchResults" class="max-h-[200px] overflow-y-auto mb-6">
                        <p class="text-gray-500 italic text-center">请输入关键词进行搜索</p>
                    </div>
                    
                    <!-- 统计信息 -->
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h3 class="text-lg font-semibold mb-3 flex items-center">
                            <i class="fa fa-bar-chart text-gray-600 mr-2"></i>
                            统计概览
                        </h3>
                        <canvas id="statsChart" height="150"></canvas>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-6 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md-mb-0">
                    <p class="text-sm">© 2023 资源关系智能问答系统 - 基于通义千问API + RAG技术</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-all-300">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-all-300">
                        <i class="fa fa-envelope text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-all-300">
                        <i class="fa fa-question-circle text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 帮助模态框 -->
    <div id="helpModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-2xl font-bold text-dark">使用帮助</h2>
                    <button id="closeHelp" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <div class="prose max-w-none">
                    <h3 class="text-lg font-semibold">如何使用问答系统</h3>
                    <p>在顶部输入框中输入您的问题，例如：</p>
                    <ul>
                        <li>查找所有与数据库相关的资源</li>
                        <li>资源A和资源B之间有什么关系？</li>
                        <li>请列出所有属于部门X的资源</li>
                    </ul>
                    <h3 class="text-lg font-semibold mt-4">支持的查询类型</h3>
                    <ul>
                        <li>模糊查询：支持关键词匹配</li>
                        <li>多跳复杂关联：支持查找资源之间的间接关系</li>
                        <li>自然语言多条件描述：支持复杂的条件过滤</li>
                    </ul>
                    <h3 class="text-lg font-semibold mt-4">知识图谱操作</h3>
                    <ul>
                        <li>点击节点可查看详情</li>
                        <li>使用工具栏的缩放按钮可以调整视图</li>
                        <li>双击空白处可以重置视图</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 历史记录模态框 -->
    <div id="historyModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-2xl font-bold text-dark">历史记录详情</h2>
                    <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <div class="prose max-w-none">
                    <h3 id="modalQuestion" class="text-lg font-semibold"></h3>
                    <div id="modalAnswer" class="mt-2"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入D3.js用于知识图谱可视化 -->
    <script src="https://cdn.jsdelivr.net/npm/d3@7.8.5/dist/d3.min.js"></script>
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 引入自定义JavaScript -->
    <script src="/static/app.js"></script>

</body>
</html>
